<template>
  <div class="">
    <input type="text" ref="inputRef" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
const inputRef = ref<HTMLInputElement | null>(null)
onMounted(() => {
  // console.log(inputRef.value)
  // ? 可选链操作符，? 代表前面的值不为null，则继续调用focus方法
  // 前面为null，则不做任何操作
  // inputRef.value?.focus()
  
  // 如果不想使用?（可选链操作符）我们可以有两种选择
  // 如果使用的if判断，则去把可选链去掉
  // 这种操作跟可选链一样比较安全
  //   if (inputRef.value) {
  //     inputRef.value.focus()
  //   }

  // 非空断言
  // 它也是有应用场景的，你100%确定，它有值，你就可以用
  inputRef.value!.focus()
  inputRef.value!.value = 'zhangsan'
})
</script>

<style scoped></style>
